<template>
  <section class="content">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <span>项目:</span>
          <el-select
            v-model="project"
            clearable
            placeholder="全部"
            @change="selectKey"
            class="myInput"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>时间：
          <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            @change="timefirst"
          ></el-date-picker>
          报警等级：
          <el-select v-model="color" clearable placeholder="请选择" >
                          <el-option v-for="item in colors" :key="item.colorid" :value="item.value" :label="item.colorname">
                          </el-option>
                      </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <el-table
        :data="tableData"
        stripe
        highlight-current-row
        class="table"
        :default-sort="{prop: 'time', order: 'descending'}"
        :cell-style="cellStyle" 
      >
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="pointName" label="测点名称"></el-table-column>
        <el-table-column prop="brief" label="异常信息"></el-table-column>
        <el-table-column sortable prop="time" :formatter="dateFormat" label="报警时间"></el-table-column>
        <el-table-column prop="color" label="报警等级"></el-table-column>
        <el-table-column prop="value" label="实测值"></el-table-column>
        <el-table-column prop="preValue" label="阈值"></el-table-column>
      </el-table>
      <div class="block">
        <span class="show-pager">显示总数</span>
        <el-pagination
          @current-change="handleCurrentChange"
          @pre-click="handlePreClick"
          @next-click="handleNextClick"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="totalRecord"
        ></el-pagination>
      </div>
    </el-col>
  </section>
</template>
<script>
export default {
  data() {
    return {
       colors: [
        { colorid: "1", colorname: "红色",value:"red"},
        { colorid: "2", colorname: "橙色",value:"orange" },
        { colorid: "3", colorname: "黄色",value:"yellow"},
      ],
      pickerOptions: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      color: null,
      value2: null,
      id: null,
      project: null,
      projectList: [],
      input: null,
      currentPage: 1,
      totalRecord: 0,
      totalPage: 0,
      tableData: [],
      formLabelWidth: "100px"
    };
  },
  methods: {
    timefirst(t) {
      this.value2 = t;
    },
    
     cellStyle(data){
      
      if (data.columnIndex == 4 && data.row.color =='red' ) {
        return 'color:red'
      }
      if (data.columnIndex == 4 && data.row.color =='orange' ){
        return 'color:orange'
      }
      if (data.columnIndex == 4 && data.row.color =='yellow' ){
        return 'color:yellow'
      }
    },
    search() {
      let data = {
        projectId: this.project,
        date: this.value2,
        color:this.color
      };
      this.riskTabModel
        .queryAlarmRecord(data)
        .then(res => {
          this.totalRecord = res.data.totalRecord;
          this.totalPage = res.data.totalPage;
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    selectKey(id) {
      this.id = id;
      this.project = id;
      this.currentPage = 1;
      let obj = {};
      obj = this.projectList.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    handleCurrentChange(event) {
      let queryData = {
        projectId: this.project,
        // date: this.value2,
        color:this.color,
        currentPage: this.currentPage,
        pageSize: "10"
      };
      this.riskTabModel
        .queryByUser(queryData)
        .then(res => {
          this.totalRecord = res.data.totalRecord;
          this.totalPage = res.data.totalPage;
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },

    //上一页
    handlePreClick(event) {
      if (this.currentPage != 1) {
        this.currentPage--;
      }
    },

    //下一页
    handleNextClick(event) {
      if (this.currentPage != this.totalPage) {
        this.currentPage++;
      }
    },

    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    date() {          
		        var seperator1 = "-";
            const start = new Date();
            var startYear = start.getFullYear();
            var startMonth = start.getMonth()+1;
            var startDate = start.getDate();
            if (startMonth >= 1 && startMonth <= 9) {
		            startMonth = "0" + startMonth;
		        }
		        if (startDate >= 0 && startDate <= 9) {
		            startDate = "0" + startDate;
            }
            var startDat = startYear + seperator1 + startMonth + seperator1 + startDate;
            this.value2 = startDat
    }
  },
  mounted() {
    this.date()

    this.projectModel
      .projectGetAll()
      .then(res => {
        this.projectList = res.data;
        
      })
      .catch(err => {
        console.log(err.message);
      });
      
    let queryData = {
      currentPage: "1",
      pageSize: "10"
    };
    this.riskTabModel
      .queryByUser(queryData)
      .then(res => {
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });
  }
};
</script>

<style scoped>
#brief {
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.content {
  overflow-y: auto;
  padding-top: 10px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
</style>